<template>
    <!-- html -->
    <div class="WatchEffect">
        <h3>this is WatchEffect</h3>
        <h3>当前水温：{{ temp }}</h3>
        <h3>当前高度：{{ heith }}</h3>
        <button @click="changeTemp">温度添加</button>
        <button @click="changeheith">高度添加</button>
    </div>
</template>


<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='WatchEffect'>
import { ref, watch, watchEffect } from 'vue'
let temp = ref(10)
let heith = ref(10)
function changeTemp() {
    temp.value += 10
}

function changeheith() {
    heith.value += 10
}

//监视 watch
// watch(temp, (val) => {
//     if (val >= 60) {
//         console.log("发送请求了")
//     }
// })

//监视 watchEffect 实现
//自动检测监视哪些属性
watchEffect(() => {
    // console.log("发送请求了")
    if (temp.value >= 60) {
        console.log("发送请求了")
    }
})

</script>

<style>
/* 样式 */
.WatchEffect {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>